<template><div>
                <div class="content__inner">
                    <header class="content__title">
                        <h1>Tooltips</h1>
                        <small>Inspired by the excellent Tipsy jQuery plugin written by Jason Frame. Tooltips are an updated version, which don’t rely on images, use CSS3 for animations, and much more.</small>

                        <div class="actions">
                            <a href="" class="actions__item zmdi zmdi-trending-up"></a>
                            <a href="" class="actions__item zmdi zmdi-check-all"></a>

                            <div class="dropdown actions__item">
                                <i data-toggle="dropdown" class="zmdi zmdi-more-vert"></i>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="" class="dropdown-item">Refresh</a>
                                    <a href="" class="dropdown-item">Manage Widgets</a>
                                    <a href="" class="dropdown-item">Settings</a>
                                </div>
                            </div>
                        </div>
                    </header>

                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">Examples</h2>
                            <small class="card-subtitle">Hover over the links below to see tooltips.</small>
                        </div>

                        <div class="card-block">
                            Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven&#39;t heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney&#39;s fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney&#39;s cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">All four directions</h2>
                            <small class="card-subtitle">Four positioning options are available: top, right, bottom, and left aligned.</small>
                        </div>

                        <div class="card-block">
                            <div class="btn-demo">
                                <button type="button" class="btn btn-primary" title="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-toggle="tooltip" data-placement="left">
                                    Tooltip on left
                                </button>

                                <button type="button" class="btn btn-primary" title="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-toggle="tooltip" data-placement="top">
                                    Tooltip on top
                                </button>

                                <button type="button" class="btn btn-primary" title="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-toggle="tooltip" data-placement="bottom">
                                    Tooltip on bottom
                                </button>

                                <button type="button" class="btn btn-primary" title="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-toggle="tooltip" data-placement="right">
                                    Tooltip on right
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                
            </div></template>